/*
 * @Author: jiu yin
 * @Date: 2024-06-14 15:43:07
 * @LastEditTime: 2024-06-19 10:22:01
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\pico\component\PicoTest.tsx
 * jiu
 */
import { useEffect, useState } from "react";
import Modal_edit from "@/comment/modal_edit";
import "./index.scss";
import { socket, addSocketNotify, removeSocketNotify } from "@/utils/webSocket";

export default function PicoTest(props: any) {
	let { isModalOpen, detail } = props;

	let [messageObj, setMessageObj] = useState({ code: 0, message: "" });

	let [itemIndex, setItemIndex] = useState<number>(100);
	let list = [
		{
			label: "启动设备",
			send: "api/device/app/launch",
			message: "api/device/app/launch",
			params: JSON.stringify({
				action: "api/device/app/launch",
				payload: {
					sn: detail.device_real_sn,
					app: "com.PICO.AdvancedGuardiansample",
				},
			}),
		},
		{
			label: "停止设备",
			send: "api/device/app/stop",
			message: "api/device/app/stop",
			params: JSON.stringify({
				action: "api/device/app/stop",
				payload: {
					sn: detail.device_real_sn,
				},
			}),
		},
		{
			label: "获取设备电量",
			send: "api/device/battery",
			message: "device/battery",
			params: JSON.stringify({
				action: "api/device/battery",
				payload: {
					sn: detail.device_real_sn,
				},
			}),
		},
		{
			label: "亮屏",
			send: "api/device/screen",
			message: "api/device/screen",
			params: JSON.stringify({
				action: "api/device/screen",
				payload: {
					sn: detail.device_real_sn,
					state: true,
				},
			}),
		},
		{
			label: "息屏",
			send: "api/device/screen",
			message: "api/device/screen",
			params: JSON.stringify({
				action: "api/device/screen",
				payload: {
					sn: detail.device_real_sn,
					state: false,
				},
			}),
		},
	];

	const active = (item: any, index: number) => {
		setItemIndex(index);
		socket.send(item.params);
	};

	//运行接收
	list.forEach((item: any) => {
		addSocketNotify(item.message, async (msg: any) => {
			if (msg.action != item.message) return;
			//获取电量单独处理
			if (msg.action == "device/battery") {
				return setMessageObj({ ...messageObj, code: msg.code, message: msg.payload?.battery });
			}
			setMessageObj({ ...messageObj, code: msg.code, message: msg.message });
		});
	});

	useEffect(() => {
		// 注销
		return () => {
			list.forEach((item: any) => removeSocketNotify(item.message));
		};
	}, []);

	return (
		<Modal_edit title="MR设备连接测试" width={900} isModalOpen={isModalOpen}>
			<section className="mt-50px flex flex-col items-center">
				<ul className="flex gap-16px justify-center">
					{list.map((item: any, index: number) => (
						<li
							className={`picoTest ${itemIndex == index && "picoTestActive"}`}
							key={index}
							onClick={() => active(item, index)}>
							{item.label}
						</li>
					))}
				</ul>
				<section className="socketStatus">
					<p style={{ color: messageObj.code == 1000 ? "#21AB68" : "#FF606B" }}>{messageObj.message}</p>
				</section>
			</section>
		</Modal_edit>
	);
}
